<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>车辆信息监测</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <style>
        .jstree-open > .jstree-anchor > .fa-folder:before {
            content: "\f07c";
        }

        .jstree-default .jstree-icon.none {
            width: 0;
        }

      /*  .modal-backdrop {
            opacity: 0 !important;
            filter: alpha(opacity=0) !important;
        }*/
    </style>

</head>
<body>
        <div class="wrapper wrapper-content animated fadeInRight col-lg-12" style="background-color:#FFFFFF" id="mainPage">

            <div class="container col-lg-12" style="padding-right:0px;">

                <div class="row clearfix col-lg-12" style="padding-right:0px;height:800px;">
                    <div class="col-lg-9 column" style="padding-right:0px;">
                        <h5><strong>运行状态监测</strong><span class="label label-default"></span></h5>

                        <div class="row clearfix">
                            <div class="col-lg-12 column" style="padding-left:0px;">
                                <table class="table table-bordered" style="border:solid #DDDDDD; padding:0px;" >
                                    <tr>
                                        <td style="border:solid #DDDDDD">总数&nbsp;600</td>
                                        <td style="border:solid #DDDDDD">负载&nbsp;111</td>
                                        <td style="border:solid #DDDDDD">空载&nbsp;124</td>
                                        <td style="border:solid #DDDDDD">在线&nbsp;64</td>
                                        <td style="border:solid #DDDDDD">离线&nbsp;23</td>
                                        <td style="border:solid #DDDDDD">充电中&nbsp;45</td>
                                        <td style="border:solid #DDDDDD">未充电&nbsp;28</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="row clearfix">
                            <div class="row col-lg-12 clearfix  padding-right:0px;">
                                <div class="col-lg-12 column " style="padding:0px;">
                                    <div class="col-lg-4 column" style="padding-left:0px;">
                                        <div class="box box-success">
                                            <div class="box-header with-border">
                                                <h3 class="box-title">空载负载状态</h3>
                                                <div class="box-tools pull-right">
                                                    <a href="?#modal-container-658647" role="button" class="btn" data-toggle="modal">详细</a>
                                                </div>
                                                <div class="modal fade" id="modal-container-658647" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" style=" width:80%">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                <h5 class="modal-title" id="myModalLabel">
                                                                    实时监测详情
                                                                </h5>
                                                            </div>
                                                            <div class="modal-body">
                                                                <span class="label label-default">条件选择</span>
                                                                <div class="row clearfix">
                                                                    <div class="col-lg-12 column">
                                                                        <table id="qc_table" data-show-header="false"></table>
                                                                        <table class="table table-bordered" style="border:solid #DDDDDD; padding:0px;" >
                                                                            <tr>
                                                                                <td style="border:solid #DDDDDD" width="12%">选择结果</td>
                                                                                <td style="border:solid #DDDDDD"><div id="chooseResult"></div></td>
                                                                                <td style="border:solid #DDDDDD" width="6%"><div><button type="button" class="btn btn-primary" id="xq_search">查询</button></div></td>
                                                                            </tr>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                                <span class="label label-default">查询结果</span>
                                                                <table id="xq_table"></table>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" id="cls_result" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <div class="chart">
                                                    <div id="barChart_load" style="height:200px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 column" style="padding-left:0px;">
                                        <div class="box box-success">
                                            <div class="box-header with-border">
                                                <h3 class="box-title">通信状态</h3>
                                                <div class="box-tools pull-right">
                                                    <a href="?#modal-container-658647" role="button" class="btn" data-toggle="modal">详细</a>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <div class="chart">
                                                    <div id="barChart_contact" style="height:200px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 column" style="padding-left:0px;">
                                        <div class="box box-success">
                                            <div class="box-header with-border">
                                                <h3 class="box-title">充电状态</h3>
                                                <div class="box-tools pull-right">
                                                    <a id="modal-658647" href="?#modal-container-658647" role="button" class="btn" data-toggle="modal">详细</a>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <div class="chart">
                                                    <div id="barChart_charge" style="height:200px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row clearfix">
                            <div class="col-lg-12 column" style="padding-left:0px;">
                                <div class="col-lg-12 column" style="padding-left:0px;">
                                    <div class="box box-success">
                                        <div class="box-header with-border" >
                                            <h3 class="box-title">故障报警状态</h3>
                                            <div class="box-tools pull-right">
                                                <a href="?#modal-container-658647" role="button" class="btn" data-toggle="modal">详细</a>
                                            </div>
                                        </div>
                                        </br>
                                        <div class="box-body " style="padding:0px; height:320px;">
                                            <div class="col-lg-5" style="float:left;height:320px;padding-top:40px;">
                                                <div class="chart">
                                                    <div id="pieChart_aram" style="height:220px"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-1" style="float:left;height:320px;padding-top:40px;">
                                                <div style="float:right;width: 1px;height: 280px;background:#F2F9FF;"></div>
                                            </div>

                                            <div class="col-lg-6" style="float:left;height:100px;" style="padding-right:0px;">
                                                <div class="row clearfix">
                                                    <div class="col-lg-12 column" style="padding-left:0px;">
                                                        <table class="table"  style="border: 0px solid transparent">
                                                            <tr height="50px">
                                                                <td></td>
                                                                <td>今天</td>
                                                                <td>昨天</td>
                                                            </tr>
                                                            <tr height="50px">
                                                                <td>
                                                                    <div style="background-color:rgb(254, 132, 99);width:20px;height:16px;float:left;margin-left:40px;"></div>
                                                                    <div style="float:left;padding-left:12px">车体告警</div>
                                                                </td>
                                                                <td>13</td>
                                                                <td>13</td>
                                                            </tr>
                                                            <tr height="50px">
                                                                <td>
                                                                    <div style="background-color:rgb(155, 202, 99);width:20px;height:16px;float:left;margin-left:40px;"></div>
                                                                    <div style="float:left;padding-left:12px">温湿度告警</div>
                                                                </td>
                                                                <td>12</td>
                                                                <td>12</td>
                                                            </tr>
                                                            <tr height="50px">
                                                                <td>
                                                                    <div style="background-color:rgb(250, 216, 96);width:20px;height:16px;float:left;margin-left:40px;"></div>
                                                                    <div style="float:left;padding-left:12px">通信状态告警</div>
                                                                </td>
                                                                <td>9</td>
                                                                <td>9</td>
                                                            </tr>
                                                            <tr height="50px">
                                                                <td>
                                                                    <div style="background-color:rgb(243, 164, 59);width:20px;height:16px;float:left;margin-left:40px;"></div>
                                                                    <div style="float:left;padding-left:12px">终端故障告警</div>
                                                                </td>
                                                                <td>5</td>
                                                                <td>5</td>
                                                            </tr>
                                                            <tr height="50px">
                                                                <td>
                                                                    <div style="background-color:rgb(96, 192, 221);width:20px;height:16px;float:left;margin-left:40px;"></div>
                                                                    <div style="float:left;padding-left:12px">电子围栏告警</div>
                                                                </td>
                                                                <td>61</td>
                                                                <td>61</td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-3 " style="padding:0px;">
                        <div class="col-lg-12">
                            </br>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="numberPlate" placeholder="请输入车牌号">
                                <span class="input-group-btn">
                      <button type="button" class="btn btn-info btn-flat" id="#car_search" onclick="temp(this.id);">Go!</button>
				   </span>
                            </div>
                        </div>

                        <br/>&nbsp;&nbsp;
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div id="using_json"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

<script src="../cljc/js/cljc.js"></script>
<script type="text/javascript">
            function temp(path){
                 // open(path);
                  window.location=path;
                //去掉modal遮罩？
                //open(path,"_self");  当前页面打开
            }
</script>

</body>
</html>

